<template>
<div class="contain">
     <van-nav-bar>
               <van-button  to="/search" slot="title" icon="search" type="primary" class="title-search">搜索</van-button>
     </van-nav-bar>
     <van-tabs title-active-color="#333333" title-inactive-color="#777777" border>
          <van-tab :title="item.name" v-for="item in active" :key="item.id">
               <actives :title="item.id"></actives>
          </van-tab>
          <div slot="nav-right" class="box-right">
          </div> 
          <div slot="nav-right" class="right" @click="showPopup">
              <i class="iconfont icon-gengduo"></i>
          </div> 
     </van-tabs>
     <van-popup v-model="show" position="right" :overlay="false" closeable :style="{ height: '100%' }"><side :item='active'></side></van-popup>
 </div>
</template>
<script>
import { getUserChannels } from '@/api/user.js'
import actives from './conpon/active.vue'
import side from './conpon/side.vue'
export default {
  data:function(){
    return {
      active:[],
      show: false
    }
  },
  methods:{
    // 请求得到的数据
    async getuser(){
      try {
        if (this.$store.state.token){
          const nus = await getUserChannels()            
          this.active = nus.data.data.channels
          localStorage.getItem('channels',nus.data.data.channels)
        } else {                     
          const SS = JSON.parse(localStorage.getItem('channels'))
          this.active = SS
          console.log(this.active)
        }              
      } catch (error) {
        console.log(error)
      }
    },
    showPopup() {
      this.show = true
    }
  },
  components:{
    actives,
    side
  },
  created(){    
    this.getuser()
  }
}
// </script>
<style lang="less">
.contain{
     .van-nav-bar{
          background: #3296fa;
          .van-nav-bar__title{
               max-width: 100%;
          }
          .title-search{
               width: 555px;
               height: 64px;
               background-color: #5babfb;
               border: none;
               border-radius: 32px;
               .van-button__text{
                    font-size: 28px;
                    color: #ffffff;
               }
               .van-icon-search{
                    font-size:32px;
                    color:#ffffff;
               }
          }
     }
     .van-tab{
          width: 187.5px;
          border-right: 1px solid #edeff3;  
     }  
     .van-tab--active{
               font-size: 30px;
     }        
     .van-tabs__line{
               bottom: 8px;
               width: 31px;
               height: 6px;
               background-color: #3296fa;
               border-radius: 3px;
     }
     .van-tabs__nav--line{
               padding-bottom: 0px;
     }
     .box-right{
          flex-shrink: 0;
          width: 67px;
     }
     .van-tabs__nav{
          position: relative;
          .right{
               position: fixed;
               right: 0px;
               height: 88px;
               display: flex;
               align-items: center;
               margin-right: 11px;
               .icon-gengduo{
                    font-size: 40px;
               }
          }
          .right::before{
               content: "";
               width: 1px;
               height: 58px;
               margin-right: 15px;
               background: url("~@/assets/gradient-gray-line.png");
               background-size: cover;
          }
     }
}
</style>
